<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片压缩工具</title>
    <link rel="stylesheet" href="image-compressor.css">
</head>
<body>
    <div class="header">
        <div class="logo">
            <span class="logo-text">图片压缩</span>
        </div>
    </div>

    <div class="container">
        <!-- 主拖放区域 -->
        <div class="drop-zone" id="dropZone">
            <div class="drop-content">
                <div class="drop-icon">📥</div>
                <h2>将WebP、JPEG和PNG图片拖放到这里！</h2>
                <p class="drop-subtitle">最多20张图片，每张图片最大5MB。可继续添加更多图片。</p>
                    <input type="file" id="fileInput" accept="image/*" multiple hidden>
                <button class="select-btn" id="selectBtn">选择图片</button>
            </div>
        </div>

        <!-- 文件列表 -->
        <div class="files-section" id="filesSection" style="display: none;">
            <div class="files-list" id="filesList"></div>
                
            <!-- 操作按钮 -->
            <div class="action-buttons" id="actionButtons" style="display: none;">
                <button class="btn btn-download" id="downloadAllBtn">
                    ⬇️ Download all
                </button>
            </div>
        </div>

        <!-- 统计信息 -->
        <div class="stats-card" id="statsCard" style="display: none;">
            <div class="stats-content">
                <div class="stats-text">
                    总共压缩了 <span id="statsTotalSize">0 KB</span>，节省比例 <span class="stats-percentage" id="statsPercentage">0%</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 提示消息 -->
    <div class="toast" id="toast"></div>

    <!-- 加载遮罩 -->
    <div class="loading-overlay" id="loadingOverlay" style="display: none;">
        <div class="loading-spinner"></div>
        <div class="loading-text">正在压缩图片...</div>
    </div>

    <script src="image-compressor.js"></script>
</body>
</html> 